<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>登录</title>
    <style>
        body {
            /*background-color: skyblue;*/
            background-image: url("./image/vjf.jpg");
        }

        .cover {
            background-color: paleturquoise;
            /*border: 5px solid rgb(0, 153, 255);*/
            box-shadow: 8px  8px 8px 8px rgba(100, 100, 255, 0.8) ;
            position: relative;
            height: 400px;
            width: 500px;
            left: 420px;
            top: 150px;
        }

        #p1,
        #p2 {
            width: 250px;
            height: 30px;
            position: absolute;
            left: 145px;
            border-radius: 20px;

        }

        #p1 {
            top: 50px;
        }

        #p2 {
            top: 113px;
        }
        #p3 {
            width: 150px;
            height: 20px;
            position: absolute;
            top: 180px;
            left: 145px;
        }
        span {
            position: absolute;
            top: 180px;
            right: 20px;
            color:red;
        }

        #p4{
            top: 10px;
            left: 50px;
            width: 250px;
            height: 40px;
            position: absolute;
            border-radius: 5px;
            background-color: turquoise;
        }

        .pp {
            width: 350px;
            height: 60px;
            background-color: white;
            position: absolute;
            bottom: 30px;
            left: 60px;
            border-radius: 10px;
        }

        .t1 {
            position: absolute;
            left: 60px;
            top: 33px;
        }

        .t2 {
            position: absolute;
            left: 63px;
            top: 98px;
        }

        .t3 {
            position: absolute;
            left: 60px;
            top: 160px;
        }

        h1 {
            color: white;
            position: absolute;
            top: 50px;
            left: 560px;
        }
        img, a {
            position: absolute;
            bottom: 150px;
        }
        img {
            left: 145px;
        }
        a {
            text-decoration: none;
            left: 255px;
        }
        .ch1 {
            position: absolute;
            bottom: 0px;
            left: 60px;
        }

    </style>

    <script>
        function getCode() {
            //时间戳：保证每一次的请求是一个新的请求
            document.getElementsByTagName("img")[0].src = "code?time=" + new Date().getMilliseconds();
        }
    </script>

</head>
<%
    Cookie[] cookies = request.getCookies();
    //request.setAttribute("ck", cookies);
    if(cookies != null) {
        for(Cookie info : cookies) {
            if("username".equals(info.getName())) {
                pageContext.setAttribute("username", info.getValue());
                pageContext.setAttribute("checked","checked");
            }
            if("password".equals(info.getName())) {
                pageContext.setAttribute("password", info.getValue());
            }
        }
    }

%>
<%--<c:forEach items="${ck}" var="ck">--%>
<%--    <c:if test="${fn:contains(ck.name, 'username')}">--%>
<%--        <c:set var="username" scope="page" value="${ck.value}"></c:set>--%>
<%--    </c:if>--%>
<%--    <c:if test="${'password' eq ck.name}">--%>
<%--        <c:set var="password" scope="page" value="${ck.value}"></c:set>--%>
<%--    </c:if>--%>
<%--</c:forEach>--%>

<body>
<h1>图书管理系统</h1>
<div class="cover">
    <form action="user?method=login" method="POST">
        <p>
        <h3 class="t1">用户名：</h3>
        <input type="text" name="username" id="p1" value="${username}" required>
        </p>
        <p>
        <h3 class="t2">密&nbsp;&nbsp;&nbsp;码：</h3>
        <input type="password" name="password" id="p2" value="${password}" required>
        </p>
        <p>
        <h3 class="t3">验证码：</h3>
        <input type="text" name="verCode" id="p3" required><span>${error eq "null" ? "" : error}</span>
        </p>
        <p>
            <img src="code" alt="验证码">
            <a href="javascript:getCode()">看不清，换一张</a>
        </p>
        <p class="pp">
            <input type="submit" value="登录" id="p4">
        </p>
        <p class="ch1">
            记住密码<input type="checkbox"  ${checked} name="repu" id="repu">
        </p>
    </form>

</div>
</body>
</html>
